<template>
  <div class="w-full h-full rounded-xl overflow-hidden">
    <!-- 头部 -->
    <header
      class="w-full h-40 flex flex-wrap items-center border-b-[1px] relative"
    >
      <el-avatar
        class="absolute left-6 top-3"
        :size="100"
        :src="userInfo.avatar ? userInfo.avatar : USER_DEFAULT_AVATAR"
      />
      <span class="absolute left-36 top-6 text-[1.2rem]">{{
        userInfo.nickname ? userInfo.nickname : "没起名的懒人一个"
      }}</span>
      <span class="absolute left-40 top-[3.5rem] svg-text"
        >[ {{ userInfo.signature ? userInfo.signature : "个性签名" }}]</span
      >
      <ul class="flex absolute left-36 top-20">
        <li>
          关注-{{
            userInfo.followCount < 9999
              ? userInfo.followCount
              : (userInfo.followCount / 10000).toFixed(1) + "万"
          }}
        </li>
        <li class="ml-12">
          粉丝-{{
            userInfo.followerCount < 9999
              ? userInfo.followerCount
              : (userInfo.followerCount / 10000).toFixed(1) + "万"
          }}
        </li>
      </ul>
      <div
        @click="toConcern"
        :class="flag ? 'click-style' : 'nature-style'"
        class="cursor-pointer overflow-hidden absolute right-4 rounded-lg w-20 flex justify-center py-2 text-[14px]"
      >
        {{ flag ? "关注" : "已关注" }}
      </div>
    </header>
    <!-- 内容 -->
    <user-body class="block w-full py-4 h-[calc(100%-10rem)]">
      <div
        v-if="userInfo.videoList"
        class="grid-container px-1 sm:px-0 w-full h-screen"
      >
        <VideoCard
          class="grid-item"
          v-for="video in userInfo.videoList"
          :key="video"
          :videoInfo="video"
          >{{ video }}</VideoCard
        >
      </div>
    </user-body>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from "vue";
import { USER_DEFAULT_AVATAR, CIZZY_DEFAULT_BG } from "@/define/cizzy";
import { getUserInfoByIdAPI } from "@/http/api/user";
import { useRoute } from "vue-router";
import VideoCard from "@/components/VideoCard.vue";
import { toFollowAPI, tocancelFollowAPI } from "@/http/api/concern";

const { id } = useRoute().params;

let flag = ref(true);
function toConcern() {
  flag.value = !flag.value;
  if (flag.value) {
    toFollowAPI({
      userId: JSON.parse(localStorage.getItem("userInfo")).userId,
      targetId: id,
    });
  } else {
    tocancelFollowAPI({
      userId: JSON.parse(localStorage.getItem("userInfo")).userId,
      targetId: id,
    });
  }
}

const userInfo = reactive({
  userId: id,
  avatar: "",
  nickname: "",
  signature: "",
  followCount: 0,
  followerCount: 0,
  videoList: [],
});

getUserInfoByIdAPI(id).then((res) => {
  userInfo.avatar = res.data.avatar;
  userInfo.nickname = res.data.nickname;
  userInfo.signature = res.data.signature;
  userInfo.followCount = res.data.followCount;
  userInfo.followerCount = res.data.followerCount;
  userInfo.videoList = res.data.videoList;
});
</script>

<style lang="scss" scoped>
.option-menu {
  display: flex;
  width: 100%;
  li {
    width: 6rem;
    height: 2rem;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.grid-container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, clamp(10rem, 45%, 12rem));
  justify-content: space-around;
  column-gap: 1rem;
  align-items: start;
  margin: 0 auto;
  .grid-item {
    min-width: 10rem;
    max-width: 12rem;
    margin: 0 1rem 1rem 0;
    width: 100%;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  }
}

.nature-style {
  border: 1px solid var(--logo-color);
  color: #000;
  background: #9b59b660;
  background: var();
}
.click-style {
  border: 1px solid var(--logo-color);
  color: #9b59b6;
  background: #cccccc60;
  background: var();
}
</style>